<template>
  <div class="layout-page w-100 h-100 flex-vertical">
    <div class="flex-content">
      <router-view />
    </div>
    <div class="flex-footer d-flex tab-box text-min bg-2 color-gray py-1">
      <div v-for="item in tabList" :key="item.key" class="tab-item w-20 flex-vertical align-items-center" :class="{ active: $route.name === item.key }" @click="onRoute(item)">
        <div class="img-box flex-center-center">
          <img :src="item.img" alt="" />
        </div>
        <div>{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const tabList = [
  {
    label: '发布',
    key: 'Publish',
    img: require('@img/tab/01.png')
  },
  {
    label: '交友社区',
    key: 'Friend',
    img: require('@img/tab/02.png')
  },
  {
    label: '首页',
    key: 'Home',
    img: require('@img/tab/03.png')
  },
  {
    label: '失寻中心',
    key: 'Find',
    img: require('@img/tab/04.png')
  },
  {
    label: '我的',
    key: 'My',
    img: require('@img/tab/05.png')
  }
];

const onRoute = (item) => router.push(`/${item.key.toLowerCase()}`);
</script>

<style lang="less" scoped>
@import '~@style/variable.less';
.layout-page {
  .tab-box {
    border-top: 1px solid @border;
    .tab-item {
      .img-box {
        width: 2.6rem;
        height: 2.6rem;
        img {
          height: 1.6rem;
          width: auto;
        }
      }
      &.active {
        img {
          height: 2.6rem;
        }
      }
    }
  }
}
</style>
